<template>
	<div class="page-wrap" data-title="订单详情页面">
		<div class="page-inner">
			<div class="section">
				<div class="sec-title">订单信息</div>
				<div class="sec-ctx">
					<div class="info-list">
						<div class="info-item">
							<div class="label">发货单状态：</div>
							<div class="val">{{fahuo_status_text}}</div>
						</div>
						<div class="info-item">
							<div class="label">发货单号：</div>
							<div class="val">{{info.orderNo}}</div>
						</div>
						<div class="info-item">
							<div class="label">下单时间：</div>
							<div class="val">{{info.createdTime}}</div>
						</div>
						<div class="info-item">
							<div class="label">发货时间：</div>
							<div class="val">{{info.fahuoTime}}</div>
						</div>
						<!-- 	<div class="info-item">
							<div class="label">支付方式：</div>
							<div class="val">{{info.aaaaaaaaaaaaaaaa}}</div>
						</div>
						<div class="info-item">
							<div class="label">支付时间：</div>
							<div class="val">{{info.aaaaaaaaaaaaaaaa}}</div>
						</div> -->
						<div class="info-item">
							<div class="label">买家备注：</div>
							<div class="val">{{info.remark}}</div>
						</div>
						<div class="info-item">
							<div class="label">发票信息：</div>
							<div class="val">{{info.invoiceStatus == 0 ? '不开发票' : '开发票'}}</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="sec-title">收货人信息</div>
				<div class="sec-ctx">
					<div class="info-list" v-if="SHOP_TYPE == 'foreign'" data-type="海外商城">
						<div class="info-item">
							<div class="label">收货人姓名：</div>
							<div class="val">{{buyer_name}} </div>
						</div>
						<div class="info-item">
							<div class="label">手机号：</div>
							<div class="val">{{shouhuoJson.phone}}</div>
						</div>
						<div class="info-item">
							<div class="label">所在地区：</div>
							<div class="val">{{buyer_full_area}}</div>
						</div>
						<div class="info-item">
							<div class="label">详细地址：</div>
							<div class="val">{{shouhuoJson.address}}</div>
						</div>
					</div>

					<div class="info-list" v-else data-type="国内商城">
						<div class="info-item">
							<div class="label">收货人姓名：</div>
							<div class="val">{{buyer_name}} </div>
						</div>
						<div class="info-item">
							<div class="label">手机号：</div>
							<div class="val">{{shouhuoJson.phone}}</div>
						</div>
						<div class="info-item">
							<div class="label">所在地区：</div>
							<div class="val">{{buyer_full_area}}</div>
						</div>
						<div class="info-item">
							<div class="label">详细地址：</div>
							<div class="val">{{shouhuoJson.address}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="section">
				<div class="sec-title">配送发货信息</div>
				<div class="sec-ctx">
					<div class="info-list">
						<div class="info-item">
							<div class="label">配送方式：</div>
							<div class="val">普通快递</div>
						</div>
						<div class="info-item">
							<div class="label">快递公司：</div>
							<div class="val">{{info.expressName}}</div>
						</div>
						<div class="info-item">
							<div class="label">物流单号：</div>
							<div class="val">{{info.expressOrder}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="section">
				<div class="sec-title">商品信息</div>
				<div class="sec-ctx">
					<div class="product-info">
						<div class="table-box">
							<el-table ref="multipleTable" :data="productJson" fit stripe border highlight-current-row
								min-width="100px" style="width: 100%">
								<el-table-column prop="1" label="商品" width="auto">
									<template slot-scope="scope">
										<div class="product-box">
											<div class="table-image-item">
												<el-image style="width: 70px; height: 70px" :src="scope.row.image" :preview-src-list="[]">
												</el-image>
											</div>
											<div class="product-title-box">
												<div class="product-title">
													{{scope.row.title}}
												</div>
												<!-- 				<div class="product-guige">
													{{scope.row.keyVals}}
												</div> -->
											</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="2" label="规格型号" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											{{scope.row.keyVals}}
										</div>
									</template>
								</el-table-column>

								<el-table-column prop="2" label="sn" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											{{scope.row.sn}}
										</div>
									</template>
								</el-table-column>

								<!-- <el-table-column prop="2" label="市场价" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											{{scope.row.priceMarket}}
										</div>
									</template>
								</el-table-column> -->

								<el-table-column prop="2" label="销售单价" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											￥ {{scope.row.priceSale}}
										</div>
									</template>
								</el-table-column>

								<el-table-column prop="2" label="数量" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											x {{scope.row.num}}
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="2" label="小计" width="auto">
									<template slot-scope="scope">
										<div class="col-text">
											￥ {{scope.row.priceSale * scope.row.num}}
										</div>
									</template>
								</el-table-column>

								<!-- <el-table-column fixed="right" label="操作" width="50px">
                  <template slot-scope="scope">
                  </template>
                </el-table-column> -->
							</el-table>
						</div>
					</div>

					<div class="huizong-info">
						<!-- 	<div class="huizong-item">
							<div class="label">商品总金额:</div>
							<div class="val">¥ {{priceJson.goods.price}}</div>
						</div>
						<div class="huizong-item">
							<div class="label">运费:</div>
							<div class="val">¥ {{priceJson.foreignYunfei.price}}</div>
						</div>
						<div class="huizong-item">
							<div class="label">满减:</div>
							<div class="val">¥ {{priceJson.foreignManjian.price}}</div>
						</div> -->
						<!-- 	<div class="huizong-item">
							<div class="label">改价:</div>
							<div class="val">¥ {{info.aaaaaaaaaaaaaaaa}}</div>
						</div>
						<div class="huizong-item">
							<div class="label">运费活动优惠:</div>
							<div class="val">¥ {{info.aaaaaaaaaaaaaaaa}}</div>
						</div>
						<div class="huizong-item">
							<div class="label">营销活动优惠:</div>
							<div class="val">¥ {{info.aaaaaaaaaaaaaaaa}}</div>
						</div>
						<div class="huizong-item">
							<div class="label">优惠券/码:</div>
							<div class="val">¥ {{info.aaaaaaaaaaaaaaaa}}</div>
						</div>
						<div class="huizong-item">
							<div class="label">积分抵扣:</div>
							<div class="val">{{info.aaaaaaaaaaaaaaaa}}积分，¥ {{info.aaaaaaaaaaaaaaaa}}</div>
						</div>
						<div class="huizong-item">
							<div class="label">余额抵扣:</div>
							<div class="val">¥{{info.aaaaaaaaaaaaaaaa}}</div>
						</div>
						<div class="huizong-item">
							<div class="label">第三方应收金额:</div>
							<div class="val">¥{{info.aaaaaaaaaaaaaaaa}}</div>
						</div>
						<div class="huizong-item">
							<div class="label">实付金额:</div>
							<div class="val">¥{{info.pricePayed}}</div>
						</div> -->

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		SHOP_TYPE
	} from '@/config/env.js'

	import {
		mapState
	} from "vuex";
	export default {
		name: "order-detail",
		components: {},

		data() {
			return {
				SHOP_TYPE,


				id: this.$route.query.id,
				info: {

				},
				fanliJson: {},
				payJson: {},
				priceJson: {},
				shouhuoJson: {},
				productJson: [],

				fahuo_status_map: {
					1: '待发货',
					4: '已发货',
				},
				fahuo_status_text: '',
				//
				buyer_name: '',
				buyer_full_area: '',
			};
		},
		computed: {},
		watch: {},
		created() {
			this.setView();
		},
		mounted() {},
		methods: {
			setView() {
				this.$api({
					url: '/admin_service.php',
					method: "get",
					data: {
						action: "fahuo_detail",
						id: this.id,
					},
				}).then((res) => {
					if (res.code == 200) {
						this.info = res.data;
						this.productJson = this.info.productJson;
						this.fanliJson = this.info.fanliJson;
						this.payJson = this.info.payJson;
						this.priceJson = this.info.priceJson;
						this.shouhuoJson = this.info.shouhuoJson;

						this.fahuo_status_text = this.fahuo_status_map[this.info.fahuoStatus]

						if (SHOP_TYPE == 'foreign') {
							let {
								firstName,
								lastName,
								country,
								province,
								city
							} = this.shouhuoJson;
							this.buyer_name = firstName + " " + lastName;
							this.buyer_full_area = [country, province, city].filter(v => v).join(' ');
						} else {
							let {
								name,
								province,
								city,
								area
							} = this.shouhuoJson;
							this.buyer_name = name;
							this.buyer_full_area = [province, city, area].filter(v => v).join(' ');
						}
					}
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.page-wrap {
		.page-inner {}
	}

	.section {
		margin-bottom: 10px;
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}

	.sec-title {
		margin-bottom: 20px;
		font-size: 14px;
		font-weight: bold;
	}

	.sec-ctx {}

	.info-list {
		flex-wrap: wrap;
		// display: flex;
		flex-wrap: wrap;

		.info-item {
			margin-bottom: 15px;
			display: flex;

			&+.info-item {
				// margin-left: 20px;
			}
		}
	}

	// 商品信息
	.product-box {
		display: flex;
		align-items: flex-start;

		.table-image-item {}

		.product-title-box {
			padding-left: 10px;

			.product-title {
				margin-bottom: 15px;
			}

			.product-guige {}
		}
	}

	// 价格汇总
	.huizong-info {
		margin-top: 30px;

		.huizong-item {
			margin-bottom: 15px;
			display: flex;
			justify-content: flex-end;
			font-size: 14px;

			.label {
				padding-right: 20px;
			}

			.val {
				min-width: 200px;
			}
		}
	}
</style>